<template>
  <div class="login-register-popup" v-show="visible && modelShow === 'login'">
    <div class="mask" @click="handleClose"></div>
    <div class="popup-container login">
      <div
        :class="
          activeTab === 'seller-login'
            ? 'popup-left-login'
            : 'popup-left-login-celebrity'
        "
      ></div>
      <div class="popup-right-login">
        <div class="popup-body">
          <div class="tab-content">
            <div
              class="tab"
              :class="{ active: activeTab === 'seller-login' }"
              @click="activeTab = 'seller-login'"
            >
              商家登陆
            </div>
            <div
              class="tab"
              :class="{ active: activeTab === 'celebrity-login' }"
              @click="activeTab = 'celebrity-login'"
            >
              网红登陆
            </div>
          </div>
          <div class="form-content">
            <div v-if="activeTab === 'seller-login'" class="login-form">
              <div class="form-item">
                <label for="username">邮箱</label>
                <input
                  v-model="loginForm.username"
                  type="text"
                  id="username"
                  placeholder="请输入"
                />
                <!-- <div
                  v-if="
                    loginForm.username.length < 3 ||
                    loginForm.username.length > 20
                  "
                  class="error-message"
                >
                  长度需在 3 到 20 个字符
                </div> -->
              </div>
              <div class="form-item">
                <label for="password">密码</label>
                <input
                  v-model="loginForm.password"
                  type="password"
                  id="password"
                  placeholder="请输入"
                />
                <!-- <div
                  v-if="
                    loginForm.password.length < 6 ||
                    loginForm.password.length > 20
                  "
                  class="error-message"
                >
                  长度需在 6 到 20 个字符
                </div> -->
              </div>
              <div class="forget-password">忘记密码?</div>
              <div class="form-item">
                <button @click="handleLogin" class="login-button">登录</button>
              </div>
              <div class="form-item-note">
                登录或注册就代表同意 <a href="">用户协议</a> 和
                <a href="">隐私政策</a>
              </div>
              <div class="no-account">
                没有账号? <a @click="modelShow = 'register'">去注册</a>
              </div>
            </div>
            <div v-if="activeTab === 'celebrity-login'" class="register-form">
              <div class="form-item">
                <label for="reg-username">邮箱</label>
                <input
                  v-model="registerForm.username"
                  type="text"
                  id="reg-username"
                  placeholder="请输入"
                />
                <!-- <div
                  v-if="
                    registerForm.username.length < 3 ||
                    registerForm.username.length > 20
                  "
                  class="error-message"
                >
                  长度需在 3 到 20 个字符
                </div> -->
              </div>
              <div class="form-item">
                <label for="reg-password">密码</label>
                <input
                  v-model="registerForm.password"
                  type="password"
                  id="reg-password"
                  placeholder="请输入"
                />
                <!-- <div
                  v-if="
                    registerForm.password.length < 6 ||
                    registerForm.password.length > 20
                  "
                  class="error-message"
                >
                  长度需在 6 到 20 个字符
                </div> -->
              </div>
              <div class="forget-password">忘记密码?</div>
              <div class="form-item">
                <button @click="handleRegister" class="login-button-celebrity">
                  登录
                </button>
              </div>
              <div class="form-item-note-celebrity">
                登录或注册就代表同意 <a href="">用户协议</a> 和
                <a href="">隐私政策</a>
              </div>
              <div class="no-account-celebrity">
                没有账号? <a @click="modelShow = 'register'">去注册</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="login-register-popup"
    v-show="visible && modelShow === 'register'"
  >
    <div class="mask" @click="handleClose"></div>
    <div class="popup-container login">
      <div
        :class="
          regTab === 'seller-reg'
            ? 'popup-left-reg'
            : 'popup-left-reg-celebrity'
        "
      ></div>
      <div class="popup-right-login">
        <div class="popup-body">
          <div class="tab-content">
            <div
              class="tab"
              :class="{ active: regTab === 'seller-reg' }"
              @click="regTab = 'seller-reg'"
            >
              商家注册
            </div>
            <div
              class="tab"
              :class="{ active: regTab === 'celebrity-reg' }"
              @click="regTab = 'celebrity-reg'"
            >
              网红注册
            </div>
          </div>
          <div class="form-content">
            <div v-if="regTab === 'seller-reg'" class="login-form">
              <div class="form-item">
                <label for="username">邮箱</label>
                <input
                  v-model="loginForm.username"
                  type="text"
                  id="username"
                  placeholder="请输入"
                />
              </div>
              <div class="form-item form-item-code">
                <label for="username">验证码</label>
                <input
                  v-model="loginForm.username"
                  type="text"
                  id="username"
                  placeholder="请输入"
                />
                <button>发送验证码</button>
              </div>
              <div class="form-item">
                <label for="password">密码</label>
                <input
                  v-model="loginForm.password"
                  type="password"
                  id="password"
                  placeholder="请输入"
                />
              </div>
              <div class="form-item">
                <label for="reg-password">确认密码</label>
                <input
                  v-model="registerForm.password"
                  type="password"
                  id="reg-password"
                  placeholder="请输入"
                />
              </div>
              <div class="form-item">
                <button @click="handleLogin" class="login-button">注册</button>
              </div>
              <div class="form-item-note">
                登录或注册就代表同意 <a href="">用户协议</a> 和
                <a href="">隐私政策</a>
              </div>
              <div class="no-account">
                有账号? <a @click="modelShow = 'login'">去登陆</a>
              </div>
            </div>
            <div v-if="regTab === 'celebrity-reg'" class="register-form">
              <div class="form-item">
                <label for="reg-username">邮箱</label>
                <input
                  v-model="registerForm.username"
                  type="text"
                  id="reg-username"
                  placeholder="请输入"
                />
              </div>
              <div class="form-item form-item-code-celebrity">
                <label for="username">验证码</label>
                <input
                  v-model="loginForm.username"
                  type="text"
                  id="username"
                  placeholder="请输入"
                />
                <button>发送验证码</button>
              </div>
              <div class="form-item">
                <label for="reg-password">密码</label>
                <input
                  v-model="registerForm.password"
                  type="password"
                  id="reg-password"
                  placeholder="请输入"
                />
              </div>
              <div class="form-item">
                <label for="reg-password">确认密码</label>
                <input
                  v-model="registerForm.password"
                  type="password"
                  id="reg-password"
                  placeholder="请输入"
                />
              </div>
              <div class="form-item">
                <button @click="handleRegister" class="login-button-celebrity">
                  登录
                </button>
              </div>
              <div class="form-item-note-celebrity">
                登录或注册就代表同意 <a href="">用户协议</a> 和
                <a href="">隐私政策</a>
              </div>
              <div class="no-account-celebrity">
                有账号? <a @click="modelShow = 'login'">去登陆</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue"

// 弹窗显示状态
const visible = ref(false)
// 当前激活的标签页
const activeTab = ref("seller-login")
const regTab = ref("seller-reg")
const modelShow = ref("register")

// 登录表单数据
const loginForm = ref({
  username: "",
  password: "",
})

// 注册表单数据
const registerForm = ref({
  username: "",
  password: "",
  confirmPassword: "",
})

// 处理关闭弹窗事件
const handleClose = () => {
  visible.value = false
}

// 处理登录按钮点击事件
const handleLogin = () => {
  if (
    loginForm.value.username.length >= 3 &&
    loginForm.value.username.length <= 20 &&
    loginForm.value.password.length >= 6 &&
    loginForm.value.password.length <= 20
  ) {
    // 这里可以添加实际的登录逻辑，例如调用 API
    console.log("登录成功")
    visible.value = false
  } else {
    console.log("请检查输入的用户名和密码")
  }
}

// 处理注册按钮点击事件
const handleRegister = () => {
  if (
    registerForm.value.username.length >= 3 &&
    registerForm.value.username.length <= 20 &&
    registerForm.value.password.length >= 6 &&
    registerForm.value.password.length <= 20 &&
    registerForm.value.confirmPassword === registerForm.value.password
  ) {
    // 这里可以添加实际的注册逻辑，例如调用 API
    console.log("注册成功")
    visible.value = false
  } else {
    console.log("请检查输入的信息")
  }
}

// 导出打开弹窗的方法
const open = () => {
  visible.value = true
}

// 暴露组件的方法和属性
defineExpose({
  open,
})
</script>

<style scoped>
.login-register-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.popup-container {
  width: 1052px;
  height: 700px;
  background: #ffffff;
  border-radius: 32px;
  z-index: 1001;
  display: flex;
  align-items: center;
}
.popup-container .popup-left-login,
.popup-left-reg,
.popup-left-reg-celebrity,
.popup-container .popup-left-login-celebrity {
  width: 526px;
  height: 700px;
  background: url("https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5a2ec6df0b3931875d8fe948c92c1d2b50f59bcbf94d722ccfda952f08a535de?noCache=true")
    no-repeat;
  background-size: 100% 100%;
}
.popup-container .popup-left-login-celebrity {
  background: url("https://lanhu-oss-2537-2.lanhuapp.com/SketchPngdb0405c19ec87b4e8779f08b1422fc8051f7716ff00ea532f20bd32f705b8ab0?noCache=true");
  background-size: 100% 100%;
}
.popup-container .popup-right-login {
  width: calc(1052px - 526px);
  height: 700px;
  padding: 86px;
}
.popup-left-reg {
  background: url("https://lanhu-oss-2537-2.lanhuapp.com/SketchPng98bed2eebba85d29144938636600d31cea84135ace460a834f7c9b1e3d798041?noCache=true");
  background-size: 100% 100%;
}
.popup-left-reg-celebrity {
  background: url("https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4f5ebe6b10026207d59399ca09aa8f2edf6e9e37d88e3953b57c34fc2e992f3e?noCache=true");
  background-size: 100% 100%;
}
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
}

.close-btn {
  cursor: pointer;
  font-size: 20px;
  color: #666;
}

.tab-content {
  display: flex;
  margin-bottom: 20px;
}

.tab {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab.active {
  border-bottom: 2px solid #007bff;
}

.form-content {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}

.form-item {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 10px;
  height: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 20px;
  text-align: left;
  font-style: normal;
}

input {
  padding: 10px 10px 10px 16px;
  width: 100%;
  width: 354px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
input:focus {
  outline: none;
  border-color: #a43aff;
}
input::placeholder {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.25);
  line-height: 22px;
  text-align: left;
  font-style: normal;
}
.error-message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

button {
  padding: 8px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.tab {
  height: 28px;
  line-height: 28px;
  padding: 0;
  font-size: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.5);
  line-height: 28px;
  text-align: left;
  font-style: normal;
  margin-right: 38px;
}
.tab.active[data-v-2b1877b8] {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  text-align: left;
  font-style: normal;
  border-bottom: 0;
  position: relative;
}

.tab.active::before {
  content: " ";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translate(-50%);
  width: 37px;
  height: 4px;
  background: #a43aff;
  border-radius: 4px;
}
.forget-password {
  width: 100%;
  text-align: right;
  height: 22px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 22px;
  text-align: right;
  font-style: normal;
  cursor: pointer;
}
.login-button,
.login-button-celebrity {
  width: 100%;
  height: 42px;
  height: 42px;
  margin-top: 24px;
  background: #a43aff;
  font-size: 14px;
  color: #ffffff;
  border-radius: 8px;
  font-style: normal;
  font-size: 14px;
}
.login-button-celebrity {
  background: #ff3f81;
}
.form-item-note,
.form-item-note-celebrity {
  height: 22px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.35);
  line-height: 22px;
  text-align: left;
  font-style: normal;
}
.form-item-note-celebrity a {
  color: #ff3f81;
  text-decoration: none;
}
.form-item-note a {
  color: #a43aff;
  text-decoration: none;
}
.no-account,
.no-account-celebrity {
  margin-top: 50px;
  width: 100%;
  text-align: center;
  height: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 20px;
  text-align: center;
  font-style: normal;
}
.no-account a {
  color: #a43aff;
  text-decoration: none;
}
.no-account-celebrity a {
  color: #ff3f81;
  text-decoration: none;
}
.form-item-code {
  /* display: flex;
  align-items: center; */
}
.form-item-code input,
.form-item-code-celebrity input {
  width: calc(100% - 106px - 12px);
  flex: 1;
}

.form-item-code button,
.form-item-code-celebrity button {
  margin-left: 12px;
  width: 106px;
  height: 42px;
  background: #a43aff;
  border-radius: 8px;
  display: inline-block;
}
.form-item-code-celebrity button {
  background: #ff3f81;
}
a {
  cursor: pointer;
}
</style>
